import React from 'react';
import {Avatar, Divider, Dropdown, Icon, Menu, Spin, Tag} from 'antd';
import moment from 'moment';
import groupBy from 'lodash/groupBy';
import Debounce from 'lodash-decorators/debounce';
import {Link} from 'dva/router';
import styles from './index.less';
// import './index.less';
// import {DesktopOutlined, SlackOutlined} from '@ant-design/icons';

import ComponentBase from '../Base/ComponentBase';

export default class GlobalHeader extends ComponentBase {
  constructor(props) {
    super(props);
    this.state = {
      time: moment().format('YYYY-MM-DD HH:mm:ss'),
    };
  }

  componentDidMount() {
    this.timer = setInterval(this.getTime, 1000);
  }

  componentWillUnmount() {
    this.triggerResizeEvent.cancel();
    clearInterval(this.timer);
  }

  getTime = () => {
    const time = moment().format('YYYY-MM-DD HH:mm:ss');
    this.setState({time});
  };

  getNoticeData() {
    const {notices} = this.props;
    if (notices == null || notices.length === 0) {
      return {};
    }
    const newNotices = notices.map(notice => {
      const newNotice = {...notice};
      if (newNotice.datetime) {
        newNotice.datetime = moment(notice.datetime).fromNow();
      }
      // transform id to item key
      if (newNotice.id) {
        newNotice.key = newNotice.id;
      }
      if (newNotice.extra && newNotice.status) {
        const color = {
          todo: '',
          processing: 'blue',
          urgent: 'red',
          doing: 'gold',
        }[newNotice.status];
        newNotice.extra = (
          <Tag color={color} style={{marginRight: 0}}>
            {newNotice.extra}
          </Tag>
        );
      }
      return newNotice;
    });
    return groupBy(newNotices, 'type');
  }

  toggle = () => {
    const {collapsed, onCollapse} = this.props;
    onCollapse(!collapsed);
    this.triggerResizeEvent();
  };

  /* eslint-disable*/
  @Debounce(600)
  triggerResizeEvent() {
    const event = document.createEvent('HTMLEvents');
    event.initEvent('resize', true, false);
    window.dispatchEvent(event);
  }

  getUsername = user => {
    const name = user.nickname ? user.nickname : user.username;
    return name;
  };

  render() {
    const {
      currentUser = {},
      collapsed,
      fetchingNotices,
      isMobile,
      logo,
      onNoticeVisibleChange,
      onMenuClick,
      onNoticeClear,
      style
    } = this.props;
    const menu = (
      <Menu className={styles.menu} selectedKeys={[]} onClick={onMenuClick}>
        <Menu.Item key={'user'} disabled>
          <Icon type="user"/>个人中心
        </Menu.Item>
        <Menu.Item key={'password'}>
          <Icon type="setting"/>修改密码
        </Menu.Item>
        <Menu.Divider/>
        <Menu.Item key="logout">
          <Icon type="logout"/>
          退出登录
        </Menu.Item>
      </Menu>
    );
    const noticeData = this.getNoticeData();
    const userStr = localStorage.getItem('user');
    let user;
    try {
      user = JSON.parse(userStr);
    } catch {
      user = {'username': ''};
    }
    const time = this.state.time;

    return (
      <div>
        <div className={styles.logo} key="logo">
          <Link to="/">
            {/*<img className={styles.logo__img} src={logo} alt="logo"/>*/}
            {/*<SlackOutlined*/}
            {/*  className={styles.logo__img}*/}
            {/*  style={{fontSize: 20, color: 'white'}}*/}
            {/*/>*/}
            <h1 className={styles.logo__text}>{this.getTenantName()}</h1>
          </Link>
        </div>

        <div className={styles.right}>
          {/*<span className={styles.desktop}>{shortName}</span>*/}
          {/*<Divider type="vertical"/>*/}
          {/*<span className={`${styles.action} ${styles.account}`}>*/}
          {/*  <Link to="/desktop/mgr" className={styles.name}*/}
          {/*  >系统基础管理</Link>*/}
          {/*</span>*/}
          {/*<span className={`${styles.action} ${styles.account}`}>*/}
          {/*  <Link to="/desktop/device/mgr" className={styles.name}*/}
          {/*  >设备运维管理</Link>*/}
          {/*</span>*/}
          {/*<span className={`${styles.action} ${styles.account}`}>*/}

          {/*  <Link to="/desktop/device/online" className={styles.name}*/}
          {/*  >设备在线监测</Link>*/}
          {/*</span>*/}
          {/*<span className={`${styles.action} ${styles.account}`}>*/}
          {/*  /!*<Avatar size={'small'} icon={<DesktopOutlined/>}></Avatar>*!/*/}
          {/*  <Link to="/desktop/device/analysis" className={styles.name}*/}
          {/*  >设备综合分析</Link>*/}
          {/*</span>*/}

          {/*<Divider type="vertical"/>*/}
          {user.username ? (
            <Dropdown overlay={menu}>
              <span className={`${styles.action} ${styles.account}`}>
                <Avatar size="small" className={styles.avatar} icon={<Icon type="user"/>}/>
                <span className={styles.name}>{this.getUsername(user)}</span>
              </span>
            </Dropdown>
          ) : (
            <Spin size="small" />
          )}
          <Divider type="vertical"/>
          <span>{time}</span>
        </div>
      </div>
    );
  }
}
